In choosing styles for navigational elements

you should try to reach a balance

between aesthetics and functionality. All of

the standard devices provided by

HTML work well at a functional level and

should be considered as a starting point.

If the user has chosen to switch off automatic

graphics download, and many do,

can your navigational scheme still work at a

plain text level, or will he be lost at sea?

The World Wide Web, by its very nature, encourages jumping from one site, from one page, from one thought, to another. It's all so easy!

Reading a book is essentially a linear process. You start at the beginning and read to the end. Some books, and all newspapers and magazines are designed to be dipped into at will. You don't have to read the whole thing, but the bits that you do read, are read in a linear fashion.

With the advent of interactive hypertext, you can be reading a line of text on one page, and with the click of a button, be transferred to a cross referenced line of text on a site on the other side of the world. Whilst this flexibility is admirable, it has the unfortunate side effect of breaking continuity of style and train of thought. At best it is distracting, at worst, it leaves the reader lost and confused.

The web page designer has to consider not only what is ON his page but what is OFF it. If the reader jumps to a 'stronger' page that is more powerful in visual terms, in content or structure, he may never come back!

Very few pieces of information can be presented in a totally random and haphazard style - they need some structure and prioritisation. I am a great believer in the 'outliner' to create multimedia or WWW content and to write copy for ads or manuals. It forces prioritisation of thought and creates a solid foundation that can be progressively elaborated upon without losing sight of the entirety. It also makes the transition from the written draft to the finished interactive CD-ROM or web page easier and more solid.

Creating a distinctive visual style and applying it rigorously is the best way to hold a series of related, or disjointed, web pages together. Like any corporate image or magazine house style, it creates its own identity - and boundaries. In navigation terms, you know when your are within it and when you have left it. Furthermore, it communicates a qualitative statement about the company or individuals responsible for it.

HOME

This hypertext home page link is
simple and unambiguous

The 'naked' home page link
on the left could just be a headline whilst
the one on the right is
definitely a hyperlinked button that
changes state when clicked

The home page link on the left
is obviously a button but provides no
visual feedback when clicked

Another typical navigation element
providing a clue to it's purpose
but giving no visual feedback when clicked

An unlabeled icon that is
fairly easily understood because it is
recognisable through
familiarity and is in context

This could be a button
or just a 'dead' bullet

This could be an imagemap
with hyperlinks to other references
but there is no clue
to tell the user that it is not just
a pretty picture!

HTML provides navigation at a number of levels - within a page using 'anchors' - from page to page and from site to site. The mechanisms used to implement this navigation can be hypertext, buttons or image maps.

The main difference between web pages and other forms of multimedia is in the ways that these elements interact with the user. A hypertext link is fairly easily understood and works every time, no more needs to be said about those. The other two suffer from potential drawbacks.

Where the 'multimedia' button will usually go in and out like a real life button when clicked, the web page button often lacks any visual feedback, it may not even be recognised as a button at all! Ideally, an interface button will operate on 'mouseUp'. That means that once it is clicked, the user has the option to move the pointer off the screen button and let go of the mouse button to cancel the operation. Web page buttons are always activated on 'mouseDown' and because of the general tardiness of the system and the fact that the button may not change in any way when clicked, the user doesn't always know what, if anything has happened. It is possible to give a screen button a coloured frame which changes colour like hypertext when clicked but this function is often omitted deliberately for aesthetic reasons.

Image maps suffer from further problems. As well as a lack of visual feedback, the 'hot' areas of the image are often unclear. With server-based CGI scripts, there is a delay as the cursor hits the image map, sends the co-ordinates to the script, and returns the new URL to the browser which, in turn, calls back to the server to find the new link. 'Client side' image maps, which do all the calculations on the local machine, are supported by some browsers but not others, so it is dangerous to use them as a sole means of navigation.

It is the web page designer's responsibility to overcome these limitations. In the endeavour to be creative and stylish, it is all too easy to overlook basic functionality. The visual clue that a button is functional can be subtle. A picture is a button if it has a fine blue frame which changes to red when the picture is clicked. A picture that looks like a button is probably a button. A 'raised' area on the screen with type on it might be a button, but it might just be someone's idea of giving emphasis to a line of type. A bullet at the beginning of a line might be a button, who knows? Click it and see? Oops, I'm now looking at a catalogue of surveying equipment and the back button at the top of the screen is dimmed, what do I do now?

Suffice it to remind that the magazine designer has only to contend with a page being turned, the web page designer has to consider many other dimensions.

Do you want to know some more about the theory behind graphic symbolism?